<%--
  Created by IntelliJ IDEA.
  User: ykq
  Date: 2024/6/6
  Time: 8:41
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>角色列表</title>
    <%--引入elementui的css样式--%>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <%--引入vue文件:必须先引入vue--%>
    <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
    <%--引入elementui的js文件--%>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <%--引入axios--%>
    <script src="/js/axios.min.js"></script>
</head>
<body>
<div id="app">
    <el-card class="box-card">
        <el-form :inline="true" :model="roleSearchForm" class="demo-form-inline">
            <el-form-item>
                <el-input v-model="roleSearchForm.roleName" placeholder="请输入角色名称"></el-input>
            </el-form-item>
            <el-form-item >
                <el-select v-model="roleSearchForm.state" placeholder="状态">
                    <el-option label="正常" value="0"></el-option>
                    <el-option label="禁用" value="1"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit" icon="el-icon-search">搜索</el-button>
                <el-button type="primary" @click="onSubmit" icon="el-icon-refresh">刷新</el-button>
                <el-button type="primary" @click="onSubmit" icon="el-icon-circle-plus-outline">添加</el-button>
            </el-form-item>
        </el-form>
        <el-table
                :data="tableData"
                border
                style="width: 100%">
            <el-table-column
                    prop="roleName"
                    label="角色名"
            >
            </el-table-column>
            <el-table-column
                    prop="remark"
                    label="备注"
                    width="220"
            >
            </el-table-column>
            <el-table-column
                    prop="status"
                    label="状态">
                <template slot-scope="scope">
                    <el-switch
                            style="display: block"
                            v-model="scope.row.status"
                            active-value="0"
                            inactive-value="1"
                            active-color="#13ce66"
                            inactive-color="#ff4949"
                            active-text="正常"
                            inactive-text="禁用"
                            @change="changeStatus(scope.row)"
                    >
                    </el-switch>
                </template>
            </el-table-column>
            <el-table-column
                    label="操作">
                <template slot-scope="scope">
                    <span v-if="scope.row.id!==1">
                    <el-button type="primary" size="small">修改</el-button>
                    <el-button type="primary" size="small" @click="fen(scope.row.id)">分配权限</el-button>
                    <el-button type="primary" size="small">删除</el-button>
                    </span>
                    <span v-else="">
                        <el-button type="primary" size="small" style="width: 100%;" disabled>分配权限</el-button>
                    </span>
                </template>
            </el-table-column>
        </el-table>
        <%--分页组件--%>
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[5, 10, 15, 20]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
    </el-card>

    <%--分配权限弹出框--%>
    <el-dialog
            title="提示"
            :visible.sync="fenDialogVisible"
            width="30%"
            >
        <%--data:树的数据
        show-checkbox:显示复选框
        node-key: 阶段的key
        default-expanded-keys: 默认展开的key
        default-checked-keys: 默认选中的key
        --%>
        <el-tree
                :data="data"
                show-checkbox
                ref="tree"
                node-key="id"
                :props="defaultProps">
        </el-tree>
        <span slot="footer" class="dialog-footer">
    <el-button @click="fenDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="qrfen()">确 定</el-button>
  </span>
    </el-dialog>
</div>

</body>
<script>
    let app = new Vue({
        el: "#app",
        data: {
            fenDialogVisible:false,
            roleSearchForm: {},
            tableData: [],
            currentPage:1,
            pageSize:5,
            total:0,
            data: [],
            checkedKeys:[],
            //默认展示的属性名
            defaultProps: {
                children: 'children',
                label: 'pname'
            },
            rid:undefined,
        },
        created() {
            this.loadTable();
        },
        methods: {
            //确认分配
            qrfen(){
                //1.得到选中的权限id
                let allCheckedId=this.$refs.tree.getCheckedKeys();
                let halfCheckedId=this.$refs.tree.getHalfCheckedKeys();
                let checkIds=allCheckedId.concat(halfCheckedId);
                //2.角色id===rid
                axios.get("/permission/qrFen?rid="+this.rid+"&checkIds="+checkIds).then(result=>{
                     this.$message.success(result.data.msg);
                     this.fenDialogVisible=false;

                })

            },
            //分配权限按钮事件
            fen(roleId){
                this.rid=roleId;
                this.fenDialogVisible=true;
                //1.查询所有的权限---层级关系
                //2.当前角色具有的权限---
                axios.get("/permission/listByRoleId?roleId="+roleId).then(result=>{
                    this.data=result.data.data.permissions;
                    this.checkedKeys=result.data.data.permissionIds;
                    setTimeout(()=>{
                        this.checkedKeys.forEach(value=>{
                            this.$refs.tree.setChecked(value,true,false)
                        })
                    },100)
                })
            },

            //修改状态事件
            changeStatus(row){
                axios.put("/role/updateStatus?id="+row.id+"&status="+row.status).then(result=>{
                    if(result.data.code===2000){
                        this.$message.success(result.data.msg);
                        this.loadTable();
                    }else{
                        this.$message.error(result.data.msg);
                    }
                })
            },

            loadTable(){
                axios.post("/role/list?current="+this.currentPage+"&pageSize="+this.pageSize,this.roleSearchForm).then(result=>{
                    this.tableData=result.data.data.list;
                    this.total=result.data.data.total;
                })
            },
            //搜索
            onSubmit(){
                this.currentPage=1;
                this.loadTable();
            },
            handleSizeChange(val){
                this.pageSize=val;
                this.loadTable()
            },
            handleCurrentChange(val){
                this.currentPage=val;
                this.loadTable()
            },
        }
    })
</script>
</html>
